<script lang="ts" setup>
import { ref, useSlots } from 'vue'

/* 入参 */
const props = defineProps({
  leftTitle: {
    type: String,
    default: '',
  },
  rightTitle: {
    type: String,
    default: '',
  },
  drag: {
    type: Boolean,
    default: false,
  },
})

// 插槽
const slot = useSlots()

/**
 * 拖拽
 */
// 拖拽ref
const resizeRef = ref()
// 是否正在拖拽
const dragFlag = ref<boolean>(false)
// 拖拽按钮距左侧距离
const resizeLeft = ref<number>(0)
const startX = ref<number>(0)
const mousedown = (e: MouseEvent) => {
  if (!props.drag) {
    return
  }
  dragFlag.value = true
  //颜色改变提醒
  startX.value = e.clientX
  resizeLeft.value = resizeRef.value?.offsetLeft
}
// boxRef
const boxRef = ref()
// 左侧树宽度
const leftWidth = ref<number>(270)
// 鼠标移动
const mousemove = (e: MouseEvent) => {
  if (!props.drag || !dragFlag.value) {
    return
  }
  const endX = e.clientX
  let moveLen = resizeLeft.value + (endX - startX.value) - boxRef.value.offsetLeft // （endx-startx）=移动的距离。resize.left+移动的距离=左边区域最后的宽度
  const maxT = boxRef.value.clientWidth - resizeRef.value.offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
  if (moveLen < 270) moveLen = 270 // 左边区域的最小宽度为270px
  if (moveLen > maxT - 500) moveLen = maxT - 500 //右边区域最小宽度为500px
  resizeRef.value.style.left = moveLen // 设置左侧区域的宽度
  leftWidth.value = moveLen
}
// 鼠标松开
const mouseup = () => {
  dragFlag.value = false
}
</script>
<template>
  <div class="common-layout" @mousemove="mousemove" @mouseup="mouseup" ref="boxRef">
    <!-- 基于左右布局 -->
    <div class="common-layout-left" v-if="slot.left" :style="{ width: leftWidth + 'px' }">
      <!-- TODO 扩展缩放-->
      <!-- title -->
      <div class="common-layout-left-header" v-if="slot['left-btn'] || props.leftTitle">
        <span class="container-group-title" v-if="props.leftTitle">{{ props.leftTitle }}</span>
        <div class="btns">
          <slot name="left-btn"></slot>
        </div>
      </div>
      <!-- content -->
      <div class="common-layout-left-content">
        <slot name="left"></slot>
      </div>
    </div>
    <!--拖拽-->
    <div class="common-layout-drag" v-if="slot.left" ref="resizeRef" @mousedown="mousedown">
      <i class="el-icon-more icon-trans" v-if="drag"></i>
    </div>
    <div
      class="common-layout-right"
      :style="{ 'max-width': slot.left ? 'calc(100% - 280px)' : '100%' }"
    >
      <!-- title -->
      <div class="common-layout-right-header" v-if="slot['right-btn'] || props.rightTitle">
        <span class="container-group-title" v-if="props.rightTitle">{{ props.rightTitle }}</span>
        <div class="btns">
          <slot name="right-btn"></slot>
        </div>
      </div>
      <div class="common-layout-right-content" v-if="slot.form || slot.table">
        <!-- 表单类布局 -->
        <div class="common-form-content" v-if="slot.form">
          <slot name="form"></slot>
        </div>
        <!-- 表格布局 -->
        <div class="common-table-content" v-if="slot.table">
          <slot name="table"></slot>
        </div>
      </div>
      <!-- 分页布局 -->
      <div class="common-page-content" v-if="slot.page">
        <slot name="page"></slot>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.common-layout {
  width: 100%;
  height: 100%;
  display: flex;

  // left布局整体样式
  .common-layout-left {
    width: 270px;
    height: 100%;
    background-color: var(--color-default-bg);
    // margin-right: 8px;
    border-radius: 5px;
    .common-layout-left-header {
      width: calc(100% - 22px);
      height: 40px;
      line-height: 40px;
      color: var(--color-deep);
      font-weight: bold;
      padding-left: 15px;
      position: relative;
      margin: 0 10px;
      border-bottom: 1px solid var(--border-color);
      .btns {
        float: right;
        margin-top: 6px;
      }
    }
    .common-layout-left-content {
      width: 100%;
      height: calc(100% - 40px);
      padding: 10px;
    }
  }

  // right布局整体样式
  .common-layout-right {
    width: 0;
    flex: 1;
    flex-shrink: 0;
    height: 100%;
    background-color: var(--color-default-bg);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .common-layout-right-header {
      width: calc(100% - 22px);
      height: 40px;
      line-height: 40px;
      color: var(--color-deep);
      font-weight: bold;
      padding-left: 15px;
      position: relative;
      margin: 0 10px;
      border-bottom: 1px solid var(--border-color);
      .btns {
        float: right;
        margin-top: 6px;
      }
    }
    // 表单和表格
    .common-layout-right-content {
      flex: 1;
      flex-shrink: 0;
      padding: 10px;
      display: flex;
      flex-direction: column;
      overflow: auto;
      .common-table-content {
        flex: 1;
        flex-shrink: 0;
        overflow: auto;
      }
    }
    // 分页
    .common-page-content {
      height: 28px;
      width: 100%;
      margin-bottom: 11px;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
    }
  }
  .common-layout-drag {
    width: 8px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }
}
.icon-trans {
  transform: rotate(90deg);
  font-size: 16px;
  cursor: w-resize;
  &:hover {
    color: var(--color-light);
  }
}
</style>
